<template >
  <div class="postloan">

    <van-radio-group
      :value="radio"
      @change="onChangeRadio"
    >
      <van-cell-group>
        <van-cell
          :title="item.title"
          value-class="value-class"
          clickable
          :data-name="item"
          @click="onClickRadio"
          v-for="(item,index) in items"
          :key="index"
        >
          <van-radio :name="item" />
        </van-cell>

        <van-cell
          title="单选框 1"
          value-class="value-class"
          clickable
          data-name="1"
          @click="onClickRadio"
        >
          <van-radio name="1" />
        </van-cell>
        <van-cell
          title="单选框 2"
          value-class="value-class"
          clickable
          data-name="2"
          @click="onClickRadio"
        >
          <van-radio name="2" />
        </van-cell>
      </van-cell-group>
    </van-radio-group>
  </div>
</template>

<script>
import card from '@/components/card'

export default {
  config: {
    navigationBarTitleText: '装逼'
  },
  data () {
    return {
      motto: 'Hello miniprograme',
      userInfo: {
        nickName: 'mpvue',
        avatarUrl: 'http://mpvue.com/assets/logo.png'
      },
      isShow: true,
      isCheck: false,
      checked: false,
      items: [
        {
          id: 1,
          title: '男、女个人马拉松单日赛（食宿自理）',
          price: '￥100',
          description: '包括参赛包和黔东南苗族侗族自治州旅游通票'
        },
        {
          id: 2,
          title: '男、女个人马拉松单日赛（含食宿）',
          price: '￥500',
          description:
            '报名费包括组委会提供的比赛前一日的食宿费用和比赛当日的早、中餐费用以及参赛包和黔东南州旅游通票'
        },
        {
          id: 3,
          title: '男、女个人超100公里三日赛（食宿自理）',
          price: '￥200',
          description:
            '包含组委会提供的交通转场费用、参赛包和黔东南苗族侗族自治州旅游通票，转场需前往组委会指定的地点乘坐转场大巴'
        },
        {
          id: 4,
          title: '男、女个人超100公里三日赛（含食宿）',
          price: '￥1480',
          description:
            '报名费包含组委会提供的比赛期间食宿与交通费用以及参赛包和黔东南州旅游通票'
        }
      ],
      values: [],
      result: [],
      val: '',
      active: 1,
      //
      radio: '1'
    }
  },

  components: {
    card
  },

  methods: {
    onChangeRadio (event) {
      this.radio = event.mp.detail
    },
    onClickRadio (event) {
      const { name } = event.mp.currentTarget.dataset
      this.radio = name
    }
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
.custom-class {
  background: #cc66ff;
}

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128 rpx;
  height: 128 rpx;
  margin: 20 rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 150px;
}

.form-control {
  display: block;
  padding: 0 12px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
}

.all {
  width: 7.5rem;
  height: 1rem;
  background-color: blue;
}

.all:after {
  display: block;
  content: "";
  clear: both;
}

.left {
  float: left;
  width: 3rem;
  height: 1rem;
  background-color: red;
}

.right {
  float: left;
  width: 4.5rem;
  height: 1rem;
  background-color: green;
}
</style>

<style>
.aaaa {
  background: #cc66ff;
  color: green;
}
.postloan .van-search__content--round {
  height: 0.65rem;
  line-height: 0.65rem;
  border-radius: 0.1rem;
  text-align: center;
  font-family: Arial;
}
.postloan .van-field__input {
  width: 100%;
}
.postloan .field-index--van-field {
  padding: 0.1rem 0 0 0 !important;
}
.postloan .van-search__field {
  text-align: center;
}
.postloan .van-tab__pane {
  margin-top: 0.3rem;
}
.postloan .van-tab--active {
  color: #2d95e0;
}
.postloan .van-tabs__line {
  background-color: #2d95e0;
  height: 2px;
  position: absolute;
  width: 1.6rem !important;
}
.postloan .van-tabs--line {
  position: relative;
  padding-top: 1.58rem;
}
.postloan .van-tabs__nav--line {
  padding: 0.2rem;
  position: fixed;
  width: 100%;
  height: 1rem;
  background-color: #ffffff;
  margin-top: 0.6rem;
}
.postloan .van-tab {
  padding: 15px 5px;
  line-height: 0.9rem !important;
  width: 160px;
}
.postloan .van-button--large {
  height: 25px;
  line-height: 25px;
  color: #2d95e0;
  background-color: #fff;
  border: 1px solid #a3d0fd;
}
</style>
